<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ attribute name="input" type="java.lang.String" required="true" description="输入框"%>
<%@ attribute name="type" type="java.lang.String" required="true" description="files、images、flash、thumb"%>
<%@ attribute name="uploadPath" type="java.lang.String" required="true" description="打开文件管理的上传路径"%>
<%@ attribute name="selectMultiple" type="java.lang.Boolean" required="false" description="是否允许多选"%>
<%@ attribute name="readonly" type="java.lang.Boolean" required="false" description="是否查看模式"%>
<%@ attribute name="maxWidth" type="java.lang.String" required="false" description="最大宽度"%>
<%@ attribute name="maxHeight" type="java.lang.String" required="false" description="最大高度"%>

<%@ attribute name="setDatePath" type="java.lang.Boolean" required="false" description="地址中是否按日期添加路径"%>
<%@ attribute name="isShowCatalogue" type="java.lang.Boolean" required="false" description="是否显示文件目录"%>

<div class="layui-upload-list"  id="${input}Preview"></div>
<div class="layui-row" >
<c:if test="${!readonly}"><a href="javascript:" onclick="${input}FinderOpen();" class="layui-btn layui-btn-xs">${selectMultiple?'添加':'选择'}</a>&nbsp;
<a href="javascript:" onclick="${input}DelAll();" class="layui-btn layui-btn-xs layui-btn-danger">清除</a></c:if>
</div>
<script type="text/javascript">
	function ${input}FinderOpen(){//<c:if test="${type eq 'thumb'}"><c:set var="ctype" value="images"/></c:if><c:if test="${type ne 'thumb'}"><c:set var="ctype" value="${type}"/></c:if>
		var date = new Date(), year = date.getFullYear(), month = (date.getMonth()+1)>9?date.getMonth()+1:"0"+(date.getMonth()+1);
		var url = "";
		var setDatePath = ${setDatePath?true:false};
		if(!setDatePath){
			url = "${ctxStatic}/ckfinder/ckfinder.html?type=${ctype}&start=${ctype}:${uploadPath}"+
            "/&action=js&func=${input}SelectAction&thumbFunc=${input}ThumbSelectAction&cb=${input}Callback&dts=${type eq 'thumb'?'1':'0'}&sm=${selectMultiple?1:0}";
		}else{
			url = "${ctxStatic}/ckfinder/ckfinder.html?type=${ctype}&start=${ctype}:${uploadPath}/"+year+"/"+month+
            "/&action=js&func=${input}SelectAction&thumbFunc=${input}ThumbSelectAction&cb=${input}Callback&dts=${type eq 'thumb'?'1':'0'}&sm=${selectMultiple?1:0}";
		}
		windowOpen(url,"文件管理",1000,700);
		//top.$.jBox("iframe:"+url+"&pwMf=1", {title: "文件管理", width: 1000, height: 500, buttons:{'关闭': true}});
	}
	function ${input}SelectAction(fileUrl, data, allFiles){
		var url="", files=ckfinderAPI.getSelectedFiles();
		for(var i=0; i<files.length; i++){//<c:if test="${type eq 'thumb'}">
			url += files[i].getThumbnailUrl();//</c:if><c:if test="${type ne 'thumb'}">
			url += files[i].getUrl();//</c:if>
			if (i<files.length-1) url+="|";
		}//<c:if test="${selectMultiple}">
		$("#${input}").val($("#${input}").val()+($("#${input}").val(url)==""?url:"|"+url));//</c:if><c:if test="${!selectMultiple}">
		$("#${input}").val(url);//</c:if>
		${input}Preview();
		//top.$.jBox.close();
	}
	function ${input}ThumbSelectAction(fileUrl, data, allFiles){
		var url="", files=ckfinderAPI.getSelectedFiles();
		for(var i=0; i<files.length; i++){
			url += files[i].getThumbnailUrl();
			if (i<files.length-1) url+="|";
		}//<c:if test="${selectMultiple}">
		$("#${input}").val($("#${input}").val()+($("#${input}").val(url)==""?url:"|"+url));//</c:if><c:if test="${!selectMultiple}">
		$("#${input}").val(url);//</c:if>
		${input}Preview();
		//top.$.jBox.close();
	}
	function ${input}Callback(api){
		ckfinderAPI = api;
		var isShowCatalogue = ${isShowCatalogue?true:false};
		if(!isShowCatalogue){
			ckfinderAPI.document.getElementById('sidebar_container').style.display="none";
		}
	}
	function ${input}Del(obj){
		//<c:if test="${type eq 'thumb' || type eq 'images'}">
		var url = $(obj).attr("url");
        var imgIndex = $(obj).attr("alt");
		//</c:if>
		//<c:if test="${type ne 'thumb' && type ne 'images'}">
        var url = $(obj).attr("url");
        var imgIndex = $(obj).attr("alt");
        //</c:if>
		var urls = $("#${input}").val().split("|");
		var imgAllUrls = "";
		for (var i=0; i<urls.length; i++){
            if (urls[i]!=""){
                if(imgIndex == i && url == urls[i]){
                	
                }else{
                	imgAllUrls += "|" + urls[i];
                }
            }
        }
		$("#${input}").val(imgAllUrls);
		//$("#${input}").val($("#${input}").val().replace("|"+url,"","").replace(url+"|","","").replace(url,"",""));
		${input}Preview();
	}
	function ${input}DelAll(){
		$("#${input}").val("");
		${input}Preview();
	}
	function ${input}Preview(){
		var li = "";
		var urls = $("#${input}").val().split("|");
		$("#${input}Preview").children().remove();
		var fileNum = 0;
		for (var i=0; i<urls.length; i++){
			if (urls[i]!=""){
				//<c:if test="${type eq 'thumb' || type eq 'images'}">
				    li = "<dd class=\"dd\"><c:if test="${!readonly}"><div class=\"operate\"><i url=\""+urls[i]+"\" onclick=\"${input}Del(this);\" alt=\""+i+"\" class=\"operateIcon close layui-icon\">&#xe640;</i></div></c:if><img src=\"" + urls[i] + "\" class=\"layui-upload-img\" onclick=\"${input}Show(this);\" alt=\""+decodeURIComponent(urls[i].substring(urls[i].lastIndexOf("/")+1))+"\"></dd>";
				    
				    $("#${input}Preview").append(li);
				//</c:if>
				//<c:if test="${type ne 'thumb' && type ne 'images'}">
				    if(fileNum == 0){
				    	li = "<table class=\"layui-table\"> <thead><tr><th>文件名</th><c:if test="${!readonly}"><th>操作</th> </c:if></tr></thead><tbody>";
				    	fileNum ++;
				    }
				    var fileName = decodeURIComponent(urls[i].substring(urls[i].lastIndexOf("/")+1));
				    if(fileName.length > 40){
				    	fileName = fileName.substring(0,37) + "...";
				    }
				    li += "<tr><td class=\"layui-elip\"><a class=\"layui-elip\" href=\""+urls[i]+"\" url=\""+urls[i]+"\" target=\"_blank\" alt=\""+i+"\">"+fileName+"</a></td>";
				    li += "<c:if test="${!readonly}"><td><a href=\"javascript:\" url=\""+urls[i]+"\" onclick=\"${input}Del(this);\" alt=\""+i+"\" class=\"layui-btn layui-btn-xs layui-btn-danger\">删除</a></td></c:if>";
				    li += "</tr>";
				//</c:if>
			}
		}
		//<c:if test="${type ne 'thumb' && type ne 'images'}">
            if(fileNum >= 0){
                li += "</tbody></table>";
            }
            $("#${input}Preview").append(li);
        //</c:if>
		if ($("#${input}Preview").html() == ""){
			$("#${input}Preview").html("<li style='list-style:none;padding-top:5px;'>无</li>");
		}
	}
	
	function ${input}Show(){
        /**layui bug  需多点击一次，才会加载动态图片*/
        $('#${input}Preview img')[0].click();
        $('.layui-layer-shade').click();
        layer.photos({
            photos: '#${input}Preview',
            closeBtn:true,
            anim: 5 
        });
    }
	${input}Preview();
</script>
<style>
.upload_img_list {
    margin: 10px 0 0 0
}
.dd {
    position: relative;
    margin: 0 10px 10px 0;
    float: left
}
.operate {
    position: absolute;
    top: 0;
    right: 0;
    margin-right:10px;
    z-index: 1
}
.operateIcon {
    cursor: pointer;
    background: #2F4056;
    padding: 2px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    margin-left: 1px;
    float: left;
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8
}
.layui-upload-img {
    width: 92px; height: 92px; margin: 0 10px 10px 0;
}
</style>